<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
    // beforeCreate
    // created
    // beforeMount
    // mounted
    // beforeUpdate
    // updated
    // activated
    // deactivated
    // beforeDestroy
    // destroyed
    // 生命周期详解
    var Test = {
        template: `<div>
            组件test组件{{text}}
            <button @click="text=text+1">改变数据</button>
        </div>`,
        data: function(){
            return {
                text: 'hello word'
            }
        },
        activated: function(){
            console.log("组件被激活了！");
        },
        deactivated:function(){
            console.log("组件被停用了！");
        },
        beforeCreate: function(){
            //组件创建之前
            // console.log(this.text)
            console.log("beforeCreate");
        },
        created: function(){
            //组件创建之后
            // console.log(this.text)
            console.log("created");
        },
        // 使用该组件，就会触发以上事件函数（钩子函数）
        // created中可以操作数据。。并且可以实现vue->页面的影响，应用：发起ajax请求
        beforeMount: function(){
            //vue 起作用，装载数据到DOM之前
            console.log('beforeMount');
        },
        mounted: function(){
            //vue 起作用，装载数据到DOM之后
            console.log('mounted');
        },
        // -----------------------------
        beforeUpdate: function(){
            //改变前
            console.log(document.body.innerHTML);
        },
        updated: function(){
            //改变后
            console.log(document.body.innerHTML);
        },
        //以上两个是当有更改数据才会触发
        //应用：beforeUpdate可以获取原来的DOM
        //updated可以获取新DOM
        //--------------------
        //beforeMount  vue启动前的DOM
        //mounted  vue启动后的DOM   只执行一次
        //---------------------
        //对应父组件v-if false 就销毁当前组件
        beforeDestroy: function(){ //销毁之前
            console.log('beforeDestroy');
        },
        destroyed: function(){ //销毁之后
            console.log("destroyed");
        }
        //销毁，最终都是做一些其他功能的释放，比如：保存到localstorge
    }
    var App = {
        components: {
            'test': Test
        },
        data: function(){
            return {
                isShow: true
            }
        },
        template: `<div>
            <keep-alive>
                <test v-if='isShow'></test>
            </keep-alive>
            <button @click='isShow = !isShow'>决定子组件生死</button>
        </div>`
    }
    new Vue({
        el: "#app",
        components: {
            'app': App
        },
        template: '<app/>'
    })

    </script>
</body>
</html>